<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址管理</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            fetchAllAddresses();

            // 绑定搜索按钮点击事件
            $('#search').on('click', function () {
                var query = $('input[name="query"]').val();

                if (query) {
                    searchAddress(query);
                } else {
                    fetchAllAddresses();
                }
            });

            // 删除地址
            $(document).on('click', '.btn-delete', function () {
                var addressId = $(this).data('id');
                if (confirm("确定要删除该地址吗？")) {
                    $.ajax({
                        url: '/admin/AddressController',
                        data: {
                            type: 'deleteAddress',
                            addressId: addressId
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status === 500) {
                                alert("删除失败");
                            } else {
                                alert("删除成功");
                                fetchAllAddresses();
                            }
                        }
                    });
                }
            });

            // 弹出添加地址模态框
            $('#addAddress').on('click', function () {
                $('#addAddressModal').modal('show');
            });

            // 弹出修改地址模态框
            $(document).on('click', '.btn-edit', function () {
                var addressId = $(this).data('id');
                var name = $(this).data('name');
                var phone = $(this).data('phone');
                var detail = $(this).data('detail');
                var state = $(this).data('state');

                $('#editAddressId').val(addressId);
                $('#editAName').val(name);
                $('#editAPhone').val(phone);
                $('#editADetail').val(detail);
                $('input[name="editAState"][value="' + state + '"]').prop('checked', true);

                $('#editAddressModal').modal('show');
            });

            // 添加地址
            $('#saveAddress').on('click', function () {
                var name = $('#aName').val();
                var phone = $('#aPhone').val();
                var detail = $('#aDetail').val();
                var state = $('input[name="aState"]:checked').val();

                if (name && phone && detail) {
                    $.ajax({
                        url: '/admin/AddressController',
                        data: {
                            type: 'addAddress',
                            name: name,
                            phone: phone,
                            detail: detail,
                            state: state
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status === 500) {
                                alert("添加失败");
                            } else {
                                alert("添加成功");
                                $('#addAddressModal').modal('hide');
                                fetchAllAddresses();
                            }
                        }
                    });
                } else {
                    alert("请填写完整信息");
                }
            });

            // 修改地址
            $('#updateAddress').on('click', function () {
                var addressId = $('#editAddressId').val();
                var name = $('#editAName').val();
                var phone = $('#editAPhone').val();
                var detail = $('#editADetail').val();
                var state = $('input[name="editAState"]:checked').val();

                if (name && phone && detail) {
                    $.ajax({
                        url: '/admin/AddressController',
                        data: {
                            type: 'updateAddress',
                            addressId: addressId,
                            name: name,
                            phone: phone,
                            detail: detail,
                            state: state
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status === 500) {
                                alert("修改失败");
                            } else {
                                alert("修改成功");
                                $('#editAddressModal').modal('hide');
                                fetchAllAddresses();
                            }
                        }
                    });
                } else {
                    alert("请填写完整信息");
                }
            });
        });

        // 获取所有地址
        function fetchAllAddresses() {
            $.ajax({
                url: '/admin/AddressController',
                data: {
                    type: 'getAllAddresses'
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("页面加载失败");
                    } else {
                        renderAddresses(respResult.data);
                    }
                }
            });
        }

        // 搜索地址
        function searchAddress(query) {
            $.ajax({
                url: '/admin/AddressController',
                data: {
                    type: 'searchAddress',
                    query: query
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderAddresses(respResult.data);
                    }
                }
            });
        }

        // 渲染地址表格
        function renderAddresses(data) {
            let tr = '';
            for (let i = 0; i < data.length; i++) {
                tr += "<tr><td>" + data[i].aId + "</td>" +
                    "<td>" + data[i].aName + "</td>" +
                    "<td>" + data[i].aPhone + "</td>" +
                    "<td>" + data[i].aDetail + "</td>" +
                    "<td>" + (data[i].aState === 1 ? "默认地址" : "普通地址") + "</td>" +
                    "<td><button class='btn btn-info btn-edit' data-id='" + data[i].aId + "' data-name='" + data[i].aName + "' data-phone='" + data[i].aPhone + "' data-detail='" + data[i].aDetail + "' data-state='" + data[i].aState + "'>修改</button> " +
                    "<button class='btn btn-danger btn-delete' data-id='" + data[i].aId + "'>删除</button></td>" +
                    "</tr>";
            }
            $('#address-table tbody').html(tr);
        }

    </script>
</head>
<body>
<div class="container">
    <div class="row mb-3">
        <div class="col-md-4">
            <input type="text" class="form-control search-input" placeholder="请输入名字或电话" name="query">
        </div>
        <div class="col-md-3 search-buttons">
            <button type="button" class="btn btn-primary search-button" id="search"><span class="glyphicon glyphicon-search"> 搜索</span>
            </button>
        </div>
        <div class="col-md-3">
            <button type="button" class="btn btn-success btn-sm" id="addAddress">添加地址</button>
        </div>
    </div>
    <div class="row">
        <table class="table table-bordered table-hover" id="address-table">
            <thead>
            <tr id="tr">
                <th>编号</th>
                <th>名字</th>
                <th>电话</th>
                <th>详细地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<!-- 添加地址模态框 -->
<div class="modal fade" id="addAddressModal" tabindex="-1" role="dialog" aria-labelledby="addAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAddressModalLabel">添加地址</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control mb-2" placeholder="名字" id="aName">
                <input type="text" class="form-control mb-2" placeholder="电话" id="aPhone">
                <input type="text" class="form-control mb-2" placeholder="详细地址" id="aDetail">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="aState" value="1" id="defaultAddress">
                    <label class="form-check-label" for="defaultAddress">
                        默认地址
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="aState" value="0" id="normalAddress" checked>
                    <label class="form-check-label" for="normalAddress">
                        普通地址
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveAddress">保存地址</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改地址模态框 -->
<div class="modal fade" id="editAddressModal" tabindex="-1" role="dialog" aria-labelledby="editAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editAddressModalLabel">修改地址</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editAddressId">
                <input type="text" class="form-control mb-2" placeholder="名字" id="editAName">
                <input type="text" class="form-control mb-2" placeholder="电话" id="editAPhone">
                <input type="text" class="form-control mb-2" placeholder="详细地址" id="editADetail">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="editAState" value="1" id="editDefaultAddress">
                    <label class="form-check-label" for="editDefaultAddress">
                        默认地址
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="editAState" value="0" id="editNormalAddress" checked>
                    <label class="form-check-label" for="editNormalAddress">
                        普通地址
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateAddress">保存修改</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
